{% extends 'common_project_tpl.html' %}
{% load static %}
{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/editor-md/css/editormd.preview.min.css' %}">
    <style>
        .title-list ul{
            padding-left: 15px;
        }
        .title-list ul a{
            display: block;
            padding: 5px 0;
        }
        .title-list {
            border-right: 1px solid #dddddd;
            min-height: 500px;
        }

        .content {
            border-left: 1px solid #dddddd;
            min-height: 600px;
            margin-left: -1px;
        }

        .panel-body {
            padding: 0px;
        }

        .panel-default .panel-heading {
        {# 弹性盒子，指定主轴方向为行对齐，对齐方式，两端对齐#} display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="container-fluid" STYLE="margin-top: 20px;">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div><h3 class="panel-title"><i class="fa fa-book" aria-hidden="true"/></i> Wiki 文档 </h3></div>
                <div class="function">
                    <a href="{% url 'main:wiki_add' pro_id %}" type="button" class="btn btn-success btn-xs">
                        <i class="fa fa-plus-circle" aria-hidden="true"/></i> 新建
                    </a>
                    {% if wiki_id %}
                        <a href="{% url 'main:wiki_edit' pro_id wiki_id%}" type="button" class="btn btn-primary btn-xs">
                            <i class="fa fa-edit" aria-hidden="true"/></i> 编辑
                        </a>
                        <a id='delete' href="#" type="button" class="btn btn-danger btn-xs">
                            <i class="fa fa-trash" aria-hidden="true"/></i> 删除
                        </a>
                    {% endif %}
                </div>
            </div>
            <div class="panel-body">
                <div class="col-lg-3 title-list">
                    <ul id="wiki-title"></ul>
                </div>
                {% if wiki_id %}
                    <div class="col-lg-9 content">
                        <div id="previewMarkdown">
                        </div>
                    </div>
                {% else %}
                    <div class="col-lg-9 content text-center" style="margin-top: 50px">
                        <div>
                            <h3>《{{ request.tracer.project.project_title }}》 Wiki文档库</h3>
                        </div>
                        <div>
                            <a href="{% url 'main:wiki_add' pro_id %}"><i class="fa fa-plus-circle" aria-hidden="true"/></i>
                                新建文档</a>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    <div id="wiki-detail-temp" style="display: none;">{% url 'main:wiki_show' project=pro_id wiki_id=1%}</div>
    {% csrf_token %}
{% endblock %}
{% block js %}
    <script src="{% static 'plugins/editor-md/editormd.min.js' %}"></script>
    <script src="{% static 'plugins/editor-md/lib/marked.min.js' %}"></script>
    <script src="{% static 'plugins/editor-md/lib/prettify.min.js' %}"></script>
    <script src="{% static 'plugins/editor-md/lib/raphael.min.js' %}"></script>
    <script src="{% static 'plugins/editor-md/lib/underscore.min.js' %}"></script>
    <script src="{% static 'plugins/editor-md/lib/sequence-diagram.min.js' %}"></script>
    <script src="{% static 'plugins/editor-md/lib/flowchart.min.js' %}"></script>
    <script src="{% static 'plugins/editor-md/lib/jquery.flowchart.min.js' %}"></script>
    <script>
        $(function () {
            showWikiList();
            {% if wiki_id %}
                getWiki();
                deleteWiki();
            {% endif %}
        })

        function showWikiList() {
            $.ajax({
                url: "{% url 'main:wiki-list' %}",
                type: "get",
                data: {
                    project:{{ pro_id }}
                },
                dataType: "JSON",
                success: function (res) {
                    if (res.ret===0){
                        $.each(res.data, function (index, item) {
                        let url_temp = $('#wiki-detail-temp').text()
                        let detail_url = url_temp.replace('/wiki/1',`/wiki/${item.id}`)
                        let htmlCode = `
                        <li id="${item.id}"><a href="${detail_url}">${item.title}</a><ul></ul></li>
                        `
                        if (item.parent) {
                                $(`#${item.parent} > ul`).append(htmlCode)
                        } else {
                                $('#wiki-title').append(htmlCode)
                        }
                    })
                    }else {
                        alert("获取wiki列表失败"+ res.errors)
                    }
                    console.log(res)

                }
            })
        }
        {% if wiki_id %}
            function getWiki() {
            $.ajax({
                url: "{% url 'main:wiki-detail' pk=wiki_id %}",
                type: "get",
                data: {
                    project:{{ pro_id }}
                },
                dataType: "JSON",
                success: function (res) {
                    console.log(res)
                    if (res.ret===0){
                        console.log(res.data.content)
                        $("#previewMarkdown").append($('<textarea>').text(res.data.content))
                        initPreivewMarkdown()
                    }else{
                        alert('获取wiki内容错误');
                    }
               }
            })
        }


        // using jQuery
        function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie != '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) == (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
        var csrftoken = getCookie('csrftoken');


        function deleteWiki() {
          $("#delete").click(function() {
            $.ajax({
                url: "{% url 'main:wiki-detail' pk=wiki_id %}",
                type: "delete",
                headers: {
                 'X-CSRFTOKEN': $("[name='csrfmiddlewaretoken']").val()
                },
                data: {
                    project:{{ pro_id }},
                },
                dataType: "JSON",
                success: function (res) {
                    console.log(res)
                    if (res.ret===0){
                         location.href = "{% url 'main:wiki' project=pro_id %}"
                    }else{
                        alert('删除wiki失败');
                    }
               }
            })
          })
        }

        function initPreivewMarkdown() {
            editormd.markdownToHTML("previewMarkdown", {
                htmlDecode: "style,script,iframe" // 过滤，将其中这些内容过滤掉
            });
        }
        {% endif %}
    </script>
{% endblock %}
